<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html lang="en">
    <head>
            <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
            <title>GRAYSCALE.js</title>
            <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.js"></script>
            <script type="text/javascript" src="grayscale.js"></script>
            <link href="css.css" rel="stylesheet" />
    </head>
    <body style="">
        <script type="text/javascript">
            document.body.className = 'js';
        </script>
        <div id="over">fdg</div>
        <div id="msg">
            <h1>grayscale.js</h1>
            <small>Copyright, &copy; <a href="http://james.padolsey.com">James Padolsey</a></small>
            <p id="jsnotice">You need JAVASCRIPT ENABLED to view this demo...</p>
            <p>Grayscale.js is an experimental attempt to emulate Microsoft's proprietary '<a href="http://msdn.microsoft.com/en-us/library/ms532889(VS.85).aspx">grayscale</a>' filter (available in most IE versions).</p>
            <ul>
                <li>Successfully tested in Opera 9, FF2/3, Safari 4, IE6/7. It only works slightly in Safari&lt;4 and Chrome because of their lacking support of <code>CanvasContext.getImageData</code> (because of this, images cannot be grayscaled).</li>
                <li>To read more about it and to learn how to use please visit: <a href="http://james.padolsey.com/javascript/grayscaling-in-non-ie-browsers/">http://james.padolsey.com/javascript/grayscaling-in-non-ie-browsers/</a></li>
                <li>Download it: <a href="grayscale.js">Full-Uncompressed</a>(<a href="grayscale.js/view/">view</a>) [~13k]</li>
            </ul>
        </div>
        <div id="contain">
        
        <!-- <body content> -->
            
        <h2>grayscale.js Demo</h2>
        <div><a class="button" href="#">Click to toggle Grayscale!</a>
            <img src="img/1.jpg" />
            <p style="background:#822425 url(img/grad1.png) repeat-x;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc in purus orci. Vivamus non mi neque, a fermentum sapien. Morbi accumsan ultrices urna nec tincidunt. Sed venenatis dictum facilisis. Nunc nec dolor nec nisl tempus consequat a non risus.</p>
        </div>
        
        <div><a class="button" href="#">Click to toggle Grayscale!</a>
            <img src="img/4.jpg" />
            <p style="background:#08586f url(img/grad2.png) repeat-x;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc in purus orci. Vivamus non mi neque, a fermentum sapien. Morbi accumsan ultrices urna nec tincidunt. Sed venenatis dictum facilisis. Nunc nec dolor nec nisl tempus consequat a non risus.</p>
        </div>
        
        <div><a class="button" href="#">Click to toggle Grayscale!</a>
            <img src="img/3.jpg" />
            <p style="background:#457720 url(img/grad3.png) repeat-x;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc in purus orci. Vivamus non mi neque, a fermentum sapien. Morbi accumsan ultrices urna nec tincidunt. Sed venenatis dictum facilisis. Nunc nec dolor nec nisl tempus consequat a non risus.</p>
        </div>
        
        </div>
            
        <!-- </body content> -->
        
        <script type="text/javascript">
        
            /* All this stuff is just for the demo */
            
            window.onload = function(){
                // jQuery is not required for grayscale.js - it's only used for the demo:
                if (document.createElement('canvas').getContext && !document.createElement('canvas').getContext('2d').getImageData) {
                    $('<p><strong>WARNING</strong>: The browser you\'re using (probably Chrome) does not support an important feature which makes it possible to make images grayscale. Please use a fully featured browser such as FF or Safari!</p>').appendTo('#msg');
                }
                $('<a id="infobutton" href="#">Bring back the info</a>')
                    .hide()
                    .click(function(){
                        $('#msg').fadeIn(300);
                        $('#over').show().fadeTo(300, 0.7);
                        $('#infobutton').fadeOut(300);
                        return false;
                    }).appendTo('body');
                $('<p/>').append($('<a href="#">See the Demo! [close]</a>').click(function(){
                    $('#over,#msg').fadeOut(300);
                    $('#infobutton').fadeIn(300);
                    return false;
                    
                })).appendTo('#msg');
                
                var h2 = $('h2');
                h2.css({
                        color: 'black',
                        opacity: '0.6'
                    })
                    .clone()
                    .css({
                        position : 'absolute',
                        top : h2.position().top-2,
                        left : '-2px',
                        color : 'yellow',
                        width: h2.width(),
                        opacity: 1
                    })
                    .insertAfter(h2);
                    
                var colorUL = $('<ul class="colorlist"/>').append((function(){
                    var colors = ['red','yellow','brown','green','orange','blue','maroon','red','yellow','brown', 'green','orange','blue','maroon','red'],
                        html = [];
                    $.each(Array(15), function(i){
                        html[html.length] = '<li style="background-color:' + (colors[i]) + ';"></li>';
                    });
                    return html.join('');
                })());
                
                $('img', '#contain').each(function(){
                    $(this)
                        .before(colorUL.clone())
                        .after(colorUL.clone());
                });
                $('a.button','#contain').toggle(function(){
                    grayscale(this.parentNode);
                }, function(){
                    grayscale.reset(this.parentNode);
                })
                grayscale.prepare($('#contain div'));
            };
        </script>
        
    </body>
</html>